<template>
  <div class="container">
    <div class="card-search">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
      <el-form-item label="设备编号">
          <el-input v-model="formInline.DTUId"></el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="formInline.types" clearable>
            <el-option
              v-for="(item , index) in options"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.timeLine"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getAllData(onGetData, 'notChangePage')"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card-table">
      <div class="btn">
          <el-button type="primary" icon="el-icon-plus" size="medium">新增</el-button>
        </div>
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column fixed align="center" label="设备编号" width="200px">
          <template slot-scope="{ row }">
            {{ row.DTUId }}
          </template>
        </el-table-column>
        <el-table-column fixed align="center" label="时间" width="150px">
          <template slot-scope="{ row }">
            {{ row.createTime ? row.createTime : "" }}
          </template>
        </el-table-column>
        <div v-if="tableData && tableData.length !== 0">
          <el-table-column
            prop="sensors"
            label="传感器"
            align="center"
            >
            <template slot-scope="scope">
                <el-button class="btnText" size="medium" type="text" icon="el-icon-receiving" @click="sensorsNews(scope.$index, scope.row)">传感器详情</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180px"
            >
            <template slot-scope="">
              <div style="display: flex">
                <el-button class="btnText" size="medium" type="text" icon="el-icon-edit" >编辑</el-button>
                <!-- <el-button class="btnText" size="medium" type="text" icon="el-icon-delete" >删除</el-button> -->
              </div>
            </template>
          </el-table-column>
        </div>
      </el-table>
      <div
        class="block"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :currPage-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="传感器" :visible.sync="sensorsDialogTableVisible" :modal-append-to-body="false">
      <div class="card-table">
        <el-table
        :header-cell-style="getRowClass"
        style="width: 100%"
        :data="sensorTable"
        >
          <el-table-column fixed align="center" label="传感器编号" width="200px">
            <template slot-scope="{ row }">
            {{ row.sensorId }}
            </template>
          </el-table-column>
          <div v-if="sensorTableData.length ===0">
            <el-table-column align="center">
              <div>-</div>
            </el-table-column>
          </div>
          <div>
            <el-table-column
              align="center"
              v-for="(item , index) in sensorTableData"
              :key="index"
            >
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.name }}</div>
              </template>
              <template slot-scope="">
                <div>
                  {{ item.value }}
                </div>
              </template>
            </el-table-column>
          </div>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { gitDeviceUnit } from "@/api/deviceEquitment/deviceUnit.js";
import { showDeviceTable } from '@/api/deviceEquitment/deviceType.js'
import axios from 'axios';
export default {
  name: "steepContent",
  data() {
    return {
      sensorTableData: [],
      sensorsDialogTableVisible: false,
      options: [],
      sensorTable: [],
      pageSize: 10,
      currPage: 1,
      total: null,
      deviceTypeId: "61d986ebfca8f66ec93084ad",
      control: {
        data: "",
        show: false,
      },
      formInline: {
        DTUId:"",
        types: "",
        data: "",
        timeLine: ["", ""],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData: [],
      interval: 0,
    };
  },
  created() {},
  mounted() {
    this.getAllData();
  },
  computed: {
  },
  methods: {
    onGetData(res) {
      const test = res.code === 200 ? "查询成功" : "暂无数据";
      this.$message({
        customClass: "mess-info",
        message: test,
      });
    },
    getAllData(onGetData, ret) {
      const that = this;
      if (that.formInline.timeLine === null) {
        that.formInline.timeLine = ["", ""];
      }
      if (ret === "notChangePage") {
        this.currPage = 1;
      }
      const params = {
        typeId: '',
        dtuId: this.formInline.DTUId,
        sensor: '',
        pageSize: this.pageSize,
        createTime: this.formInline.timeLine[0],
        updateTime: this.formInline.timeLine[1],
        // code: this.formInline.code,
        // currPage: this.currPage
      };
      console.log("prams", params);
    gitDeviceUnit(params).then((res) =>{
        console.log("res", res);
        let tableRes = res.data.data
        if(res.data.code === 200){
          this.tableData = tableRes;
          that.total = this.tableData.length
          }
    })
    //设备类型
    showDeviceTable().then(res => {
      if (res.data.code === 200) {
        // console.log('+++++', res);
        res.data.data.pageData.forEach(i => {
          this.options.push({
            label: i.name,
            value: i._id
          })
        })
      }
    })
    },
    //传感器
    sensorsNews(index , row) {
      console.log(index , row);
      this.sensorsDialogTableVisible = true;
      this.sensorTable = row.sensor
      for(let i = 0; i < row.sensor.length; i++){
        let arr = row.sensor[i];
        let data = [];
        for(let a in arr.unitMap){
          arr.unitMap[a].name = a;
          data.push(arr.unitMap[a])
        }
        this.sensorTableData = data
      }

    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getAllData();
    },
  },
};
</script>

<style  scoped>
.block  .el-pager .active {
  background-color: $primary !important;
}
 .el-table .el-table__cell {
  padding: 20px 0;
}
.btn {
      margin-bottom: 15px;
      width: 200px;
    }
.container {
  .seachAndState {
    display: flex;
    justify-content: space-between;
    .stateClass {
      display: flex;
      height: 100%;
      padding: 5px 10px 10px 20px;
      width: 200px;
      .greenLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(133, 231, 163);
        border-radius: 0.4rem;
        border: 1px solid rgba(41, 241, 101, 0.349);
      }
      .redLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(219, 99, 99);
        border-radius: 0.4rem;
        border: 1px solid rgba(241, 148, 41, 0.349);
      }
    }
  }
}
</style>
